<script setup>
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import {
    getqueryUSerInfoApi,
    queryUSerInfoformphoneApi,
    // editqueryUSerInfoApi,
    // deletequeryUSerInfoApi,

} from '@/api/ManageView'
import { ref, createVNode } from 'vue'
const dataSource = ref([])
getqueryUSerInfoApi().then(res => {
    // console.log(res.data)
    dataSource.value = res.data
    console.log(dataSource.value);
}).catch(err => console.log(err))

// editqueryUSerInfoApi().then(res => console.log(res)).catch(err => console.log(err))
// deletequeryUSerInfoApi().then(res => console.log(res)).catch(err => console.log(err))

const formState = ref({
    current_progress: '',
    grade_one: '',
    grade_three: '',
    grade_two: '',
    phone_number: '',
    schoolID: '',
    specialized_class: '',
    user_clusters: [],
    username: '',
});
const open = ref(false);
const afterOpenChange = bool => {
    console.log('open', bool);
};
const onClose = () => {
    getuserinfo()
    console.log('啊啊啊啊啊关闭！！！！！');
};
const userphone = ref();

const getuserinfo = () => {
    return queryUSerInfoformphoneApi({ phone_number: userphone.value }).then(res => {
        formState.value = res.data

    }).catch(err => { console.log(err) })
}
const showDrawer = (userinfo) => {
    userphone.value = userinfo.phone_number
    getuserinfo()
    open.value = true;
};

// 提交修改信息
const onSubmit = () => {
    const formData = {
        username: formState.value.username,
        specialized_class: formState.value.specialized_class,
        schoolID: formState.value.schoolID,
        phone_number: formState.value.phone_number,
        current_progress: formState.value.current_progress,
        grade_one: formState.value.grade_one,
        grade_two: formState.value.grade_two,
        grade_three: formState.value.grade_three,
        user_clusters: formState.value.user_clusters,
        // qqsmtp: formState.value.qqsmtp,
    };

    // 在这里执行提交操作，可以将 formData 发送到服务器或执行其他逻辑
    console.log('提交的表单数据：', formData);
    console.log('submit!');
};
// 删除用户
const ondelete = () => {
    Modal.confirm({
        title: '删除用户',
        icon: createVNode(ExclamationCircleOutlined),
        content: '是否确认删除该用户所有信息？',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk() {
            console.log('删除成功！')
        },
        onCancel() {
            console.log('取消')
        },
    })
    console.log('删除成功！');
}

const labelCol = {
    style: {
        width: '150px',
    },
};
const wrapperCol = {
    span: 14,
};


const columns = [
    {
        title: '姓名',
        dataIndex: 'username',
        key: 'username',
    },
    {
        title: '学号',
        dataIndex: 'schoolID',
        key: 'schoolID',
    },
    {
        title: '班级',
        dataIndex: 'specialized_class',
        key: 'specialized_class',
    },
    {
        title: '方向',
        dataIndex: 'user_clusters',
        key: 'user_clusters',
    },
    {
        title: '当前面试进度',
        dataIndex: 'current_progress',
        key: 'current_progress',
    },
    {
        title: '一面',
        dataIndex: 'grade_one',
        key: 'grade_one',
    },
    {
        title: '二面',
        dataIndex: 'grade_two',
        key: 'grade_two',
    },
    {
        title: '三面',
        dataIndex: 'grade_three',
        key: 'grade_three',
    },
    {
        title: '手机号',
        dataIndex: 'phone_number',
        key: 'phone_number',
    },

]


</script>

<template>
    <div>
        <header>
            <h1>——3g移动应用开发实验室报名数据管理——</h1>
        </header>

        <body>
            <table class="custom-table">
                <thead>
                    <tr>
                        <th v-for="column in columns" :key="column.key">
                            {{ column.title }}
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item) in dataSource" :key="item.id">
                        <td v-for="(column) in columns" :key="column.key">
                            <div>
                                {{ item[column.dataIndex] }}
                            </div>

                        </td>
                        <div>
                            <a-button type="primary" @click="showDrawer(item)">修改</a-button>
                        </div>
                    </tr>
                </tbody>
            </table>
        </body>

        <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name"
            :root-style="{ color: 'blue' }" style="color: red" title="修改信息" placement="right"
            @after-open-change="afterOpenChange" @close="onClose">
            <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="username">
                    <a-input v-model:value="formState.username" />
                </a-form-item>
                <a-form-item label="specialized_class">
                    <a-input v-model:value="formState.specialized_class" />
                </a-form-item>
                <a-form-item label="schoolID">
                    <a-input v-model:value="formState.schoolID" />
                </a-form-item>
                <a-form-item label="phone_number">
                    <a-input v-model:value="formState.phone_number" />
                </a-form-item>
                <a-form-item label="current_progress">
                    <a-input v-model:value="formState.current_progress" />
                </a-form-item>
                <a-form-item label="grade_one">
                    <a-input v-model:value="formState.grade_one" />
                </a-form-item>
                <a-form-item label="grade_two">
                    <a-input v-model:value="formState.grade_two" />
                </a-form-item>
                <a-form-item label="grade_three">
                    <a-input v-model:value="formState.grade_three" />
                </a-form-item>
                <a-form-item label="user_clusters">
                    <div class="container">
                        <form>
                            <label>
                                <input type="radio" value="ios" v-model="formState.user_clusters" />
                                <span>iOS</span>
                            </label>
                            <label>
                                <input type="radio" value="web" v-model="formState.user_clusters" />
                                <span>Web</span>
                            </label>
                            <label>
                                <input type="radio" value="server" v-model="formState.user_clusters" />
                                <span>Server</span>
                            </label>
                            <label>
                                <input type="radio" value="android" v-model="formState.user_clusters" />
                                <span>Android</span>
                            </label>
                            <label>
                                <input type="radio" value="未定向" v-model="formState.user_clusters" />
                                <span>未定向</span>
                            </label>
                        </form>
                    </div>
                </a-form-item>

                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="onSubmit">提交修改</a-button>
                    <br />
                    <a-button type="primary" danger style="margin: 10px 0" @click="ondelete">删除用户</a-button>
                </a-form-item>
            </a-form>
        </a-drawer>
    </div>
</template>

<style lang="scss" scoped>
.custom-table {
    border-collapse: collapse;
    /* 合并边框 */

    width: 100%;
    /* 表格宽度100% */
    border: 1px solid #ddd;
    /* 边框样式 */
}

.custom-table th,
.custom-table td {
    border: 1px solid #ddd;
    /* 单元格边框样式 */
    padding: 8px;
    text-align: center;
}

.custom-table th {
    background-color: #f2f2f2;
    /* 表头背景色 */
}



.container form {
    // display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.container label {
    display: flex;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.375em;
}

.container label input {
    position: absolute;
    left: -9999px;
}

.container label input:checked+span {
    background-color: #019468;
    color: white;
}

.container label input:checked+span:before {
    box-shadow: inset 0 0 0 0.4375em #136a0a;
}

.container label span {
    display: flex;
    align-items: center;
    padding: 0.375em 0.75em 0.375em 0.375em;
    border-radius: 99em;
    transition: 0.25s ease;
    color: #019468;
}

.container label span:hover {
    background-color: #d6d6e5;
}

.container label span:before {
    display: flex;
    flex-shrink: 0;
    content: '';
    background-color: #fff;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    margin-right: 0.375em;
    transition: 0.25s ease;
    box-shadow: inset 0 0 0 0.125em #136a0a;
}
</style>
